<meta charset="utf-8">
<button onclick="s1()">1</button>
<button onclick="s2()">2</button>
<button onclick="s3()">3</button>
<button onclick="s4()">4</button>
<button onclick="s5()">5</button>
<button onclick="fangda()">放大</button>
<button onclick="suoxiao()">缩小</button>
<button onclick="xia()">下一张</button>
<button onclick="shang()">上一张</button>
<button  onclick="zhuan()">旋转</button>
<hr />
<img id="pic"  style="transition:all 1s" width="400" src="1.jpg" />
<script> 
var deg=0;
var i=1;
   function shang(){
        switch(i){
              case 1:s5();break
              case 2:s1();break
              case 3:s2();break
              case 4:s3();break
              case 5:s4();break
              deafult:break;
         }
    }
   function xia(){
        switch(i){
              case 1:s2();break
              case 2:s3();break
              case 3:s4();break
              case 4:s5();break
              case 5:s1();break
              deafult:break;
         }
    }            
   function zhuan(){
        deg +=90;
        pic.style.transform="rotate("+deg+"deg)";

}
   function s1(){
       pic.src="1.jpg";
       i=1;
   }
   function s2(){
       pic.src="2.jpg";
       i=2;
   }
    function s3(){
       pic.src="3.jpg";
       i=3;
   }
    function s4(){
       pic.src="4.jpg";
       i=4;
   }
    function s5(){
       pic.src="5.jpg";
       i=5;
   }
    function fangda(){
       pic.width=pic.width*1.1;
}
   function suoxiao(){
       pic.width=pic.width*0.9;
}
</script>